<template>
    <section class="modlude">
        <el-form :inline="true" :model="formSearch" class="form_inline" label-width="80px" size="small">
            <el-form-item label="所属设备" prop="deviceId">
                <el-select v-model="formSearch.deviceId" clearable placeholder="请选择设备">
                    <el-option v-for="item in devList" :label="item.name" :value="item.id" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属位号" size="small" prop="pointId">
                <el-cascader ref="cascader1" v-model="formSearch.pointId" :options="dictionarypointTree"
                    :props="defaultProps1" :show-all-levels="false" checkStrictly>
                </el-cascader>
            </el-form-item>
            <el-form-item label="属性" size="small" prop="driverAttributeId">
                <el-cascader ref="cascader" v-model="formSearch.driverAttributeId" :options="driverattributeTree"
                    :props="defaultProps2" :show-all-levels="false" checkStrictly>
                </el-cascader>
            </el-form-item>
            <el-form-item label="内容" prop="value" size="small">
                <el-input v-model="formSearch.value"></el-input>
            </el-form-item>
            <!-- <el-form-item label="备注" prop="description" size="small">
                        <el-input type="textarea" v-model="formSearch.description"></el-input>
                    </el-form-item> -->

            <el-form-item>
                <el-button size="medium " @click="getlist">查 询</el-button>
                <el-button size="medium " @click="addDialog = true">新 增
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="formData" style="width: 100%" stripe>
            <!-- <el-table-column prop="id" label="模板唯一ID"></el-table-column> -->
            <el-table-column prop="deviceName" label="所属设备"></el-table-column>
            <el-table-column prop="pointName" label="所属位号"></el-table-column>
            <el-table-column prop="pointAttributeName" label="属性"></el-table-column>
            <el-table-column prop="value" label="内容"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间">
                <template slot-scope="scope">
                    {{$root.getDateArray(scope.row.updateTime)[9]}}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
                <template slot-scope="scope">
                    {{$root.getDateArray(scope.row.createTime)[9]}}
                </template>
            </el-table-column>
            <!-- <template slot-scope="scope">
            {{scope.row.enable==true?"是":"否"}}
        </template> -->
            </el-table-column>
            <el-table-column prop="description" label="备注"></el-table-column>
            <el-table-column label="操作" fixed="right" width=240>
                <template slot-scope="scope">
                    <!-- v-if="$root.btnControl.find(item=>item=='edit')" -->
                    <el-button type="warning" size="small" @click="xiangqing(2,scope.row)">修 改
                    </el-button>
                    <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
                    <el-button type="danger" size="small" @click="deleInfor(scope.row.id)">删 除
                    </el-button>
                    <el-button type="" size="small" @click="xiangqing(3,scope.row)">详 情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <paging @changePage=handleCurrentPage :get-total='total'></paging>

        <!-- 添加 -->
        <el-dialog :title="isAddUpdata==1?'新增':isAddUpdata==2?'修改':'详情'" width="40%" :visible.sync="addDialog"
            @closed='closeadd' :close-on-click-modal="false">
            <div class="cont_box_right">
                <el-form :inline="true" class="formdiv" size="small" :model="formPush" ref='addList'
                    :disabled="isAddUpdata==3?true:false">
                    <div class="deviceIdbox">
                        <el-form-item label="所属设备" prop=""  :rules="{ required: true, trigger: 'change' }">
                            <el-select :disabled="isAddUpdata!=1?true:false" style="width:100%" filterable v-model="formPush.deviceIds" multiple clearable
                                placeholder="请选择设备">
                                <el-option v-for="item in devList" :label="item.name" :value="item.id" :key="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <el-form-item label="所属位号"  size="small" prop="pointId"
                        :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                        <!--  -->
                        <el-cascader :disabled="isAddUpdata!=1?true:false" ref="cascader1" v-model="formPush.pointId" :options="dictionarypointTree"
                            :props="defaultProps1" :show-all-levels="false" checkStrictly>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="属性"  size="small" prop="pointAttributeId"
                        :rules="{ required: true, message: '该项不能为空', trigger: 'change' }">
                        <el-cascader :disabled="isAddUpdata!=1?true:false" ref="cascader1" v-model="formPush.pointAttributeId" :options="driverattributeTree"
                            :props="defaultProps2" :show-all-levels="false" checkStrictly @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="内容" prop="value" size="small">
                        <el-input v-model="formPush.value"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="description" size="small">
                        <el-input type="textarea" v-model="formPush.description"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium " @click="closeadd">取 消</el-button>
                <el-button size="medium " v-if="isAddUpdata!=3" @click="addList">提 交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import paging from "../../components/paging"
    import {
        pointinfoadd, pointinfolist, pointinfodelete, dictionarypointattribute, pointinfoupdate, iotdevicepage, dictionarypoint
    } from '../../url/api';

    export default {
        data() {
            return {
                defaultProps2: {
                    // children: 'children',
                    // label: 'label',
                    // value: 'value',
                    emitPath: false,
                    expandTrigger: 'hover', checkStrictly: true
                },
                defaultProps1: {
                    emitPath: false,
                    expandTrigger: 'hover', checkStrictly: true
                },
                formData: [],
                optionsenable: [{
                    value: true,
                    label: '是'
                }, {
                    value: false,
                    label: '否'
                }],
                addDialog: false,
                isAddUpdata: 1,
                formPush: {

                },
                formSearch: {
                    page: {
                        size: 10,
                        current: 1,
                    }
                },
                total: 0,
                devList: [],
                driverattributeTree: [],
                dictionarypointTree: [],
            }
        },
        methods: {
            getdriverattribute() {
                this.driverattributeTree = [];
                dictionarypointattribute().then(res => {
                    console.log(res.data);
                    this.driverattributeTree = res.data.data;
                    console.log(this.driverattributeTree, "AAAAAAAAAAAAAAAAAAA");
                })
            },
            getdictionarypoint() {
                this.dictionarypointTree = [];
                let params = {
                    parent: 'profile'
                }
                dictionarypoint(params).then(res => {
                    console.log(res.data);
                    this.dictionarypointTree = res.data.data.filter(val => {
                        val.disabled = true
                        return val;
                    });
                    console.log(this.dictionarypointTree, "QQQQQQ");
                })
            },
            getDevList() {
                const { deviceName, xqId } = this.formSearch;
                iotdevicepage({
                    current: 1,
                    size: 99999999,
                }).then(({ data }) => {
                    if (data.ok) {
                        this.devList = data.data.records;

                    }
                })

            },
            handleChange(value) {
                // this.addForm.sectionId = this.option1[this.option1.length - 1];
                // console.log("区域ID", this.addForm.sectionId);
            },
            deleInfor(id) {
                this.$confirm("确定执行此操作吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id: id
                    }
                    pointinfodelete(params).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getlist();
                        } else {
                            this.$message({
                                message: res.data.message,
                                type: 'error'
                            });
                        }
                    })
                })
            },
            closeadd() {
                this.formPush = {},
                    this.$refs.addList.resetFields();
                this.isAddUpdata = 1
                this.addDialog = false;
                // this.disabled = false;
                // this.productvalue ={};
                // console.log("aaaaaa",this.productvalue);
            },
            xiangqing(index, row) {
                this.isAddUpdata = index;
                
                this.formPush = {
                    description: row.description,
                    id: row.id,
                    pointAttributeId: row.pointAttributeId,
                    pointId: row.pointId,
                    value: row.value
                }
                if(index != 1){
                    this.formPush.deviceIds = [row.deviceId]
                }
                // debugger
                this.addDialog = true
            },
            addList() {
                if (this.formPush.deviceIds.length == 0) {
                    this.$message({
                        message: "请选择设备",
                        type: 'warning'
                    });
                    return;
                }

                this.$refs.addList.validate((valid) => {
                    if (valid) {
                        // debugger
                        // delete this.formPush.projectId
                        this.$confirm("确定执行此操作吗？", '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            let params = this.formPush;
                            console.log(params, "aaaaaaaaaaaaaaaaa");
                            if (this.isAddUpdata == 1) {
                                delete params.id
                                pointinfoadd(params).then((res) => {
                                    if (res.data.ok) {
                                        this.$message({
                                            message: '新增成功',
                                            type: 'success'
                                        });
                                        this.getlist();
                                    } else {
                                        this.$message({
                                            message: res.data.message,
                                            type: 'error'
                                        });
                                    }
                                    this.$refs.addList.resetFields();
                                    this.addDialog = false
                                })
                            } else if (this.isAddUpdata == 2) {
                                params.id = this.formPush.id
                                params.deviceId = this.formPush.deviceIds[0];
                                delete params.deviceIds
                                pointinfoupdate(params).then((res) => {
                                    if (res.data.ok) {
                                        this.$message({
                                            message: '修改成功',
                                            type: 'success'
                                        });
                                        this.getlist();
                                    } else {
                                        this.$message({
                                            message: res.data.message,
                                            type: 'error'
                                        });
                                    }
                                    this.closeadd()
                                    // this.addDialog = false
                                })
                            }

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            getlist() {
                pointinfolist(this.formSearch).then((res) => {
                    //console.log(res)
                    if (res.data.ok == true) {
                        this.formData = res.data.data.records.filter(item => {
                            // console.log(this.devList,"aaaaaaaaaaa");
                            this.devList.find(dev => {//设备字段
                                // console.log(this.devList,"aaaaaaaaaaa");

                                if (dev.id == item.deviceId) {
                                    item.deviceName = dev.name
                                }
                            });
                            // console.log(this.driverattributeTree, "QQQQQQQQQ");
                            this.driverattributeTree.filter(bute => {
                                // console.log(bute.children, "WWWWWWWWW");
                                if (bute.children.length > 0) {
                                    // console.log();
                                    bute.children.filter(dri => {//属性字段
                                        if (dri.value == item.pointAttributeId) {
                                            item.pointAttributeName = dri.label
                                        }
                                    })
                                }
                                // this.driverattributeTree.children
                            })

                            this.dictionarypointTree.filter(point => {
                                if (point.children.length > 0) {
                                    point.children.filter(poi => {//所属位号字段
                                        if (poi.value == item.pointId) {
                                            item.pointName = poi.label
                                        }
                                    })
                                }
                            })


                            // this.dictionarypointTree.children.find(point=>{//所属位号字段
                            //     if(point.value = item.pointId){
                            //         item.pointName = point.lable
                            //     }
                            // } )
                            // console.log(item, "AAAAAA");
                            return item;
                        });
                        this.total = res.data.data.total * 1
                    } else {
                        this.$message(res.data.message);
                    }
                })
            },
            handleCurrentPage(val) {
                this.formSearch.page.current = val
                this.getlist()
            },
            init() {

                this.getDevList();
                this.getdriverattribute();
                this.getdictionarypoint();
                setTimeout(() => {
                    this.getlist();
                }, 1500)
                // this.$nextTick
            }
        },
        mounted() {
            this.init();
        },
        components: {
            paging,
        }
    }
</script>
<style scoped>
    .formdiv /deep/ .el-input {
        width: 200px;
    }

    .formdiv /deep/ .el-form-item__label {
        width: 110px;
    }

    .deviceIdbox /deep/ .el-input {
        width: 525px;
    }

    .deviceIdbox /deep/ .el-input__inner {
        width: 100%;
        max-width: 100%
    }
</style>